import { Layout } from 'antd';
import React, { useState } from 'react';
import './index.less';
import CmsHeader from './components/CMSHeader';
import CmsMneu from './components/CMSMenu';

const { Content } = Layout;
const LayoutIndex = (props: any) => {
  console.log('props', props);
  const { routes } = props;
  const [flag, setFlag] = useState<boolean>(false);
  const toggle = () => {
    setFlag(!flag);
  };
  return (
    <Layout className="layout-container">
      <CmsMneu flag={flag} route={routes}></CmsMneu>
      <Layout className="site-layout">
        <CmsHeader flag={flag} toggle={toggle}></CmsHeader>
        <Content
          className="site-layout-background"
          style={{
            margin: '24px 16px',
            padding: 24,
            minHeight: 280,
          }}
        >
          {props.children}
        </Content>
      </Layout>
    </Layout>
  );
};

export default LayoutIndex;
